js消除小游戏(极简版)
js小游戏极简版
(1) 基础布局
<div class = "box">
<p></p>
<div class="div"></div>
</div>
(2)简单的基础样式
* {
margin: 0;
padding: 0;
} div.box {
width: 1000px;
height: 700px;
border: 1px solid #008B8B;
box-sizing: border-box;
} p {
border-radius: 50%;
height: 20px;
width: 20px;
background-color: darkkhaki;
position: absolute;
top: 660px;
left: 490px;
z-index: 2;
} span {
position: absolute;
width: 100px;
height: 20px;
background-color: sandybrown;
box-sizing: border-box;
border: 1px solid bisque;
}
//js添加的小方块样式 .div {
width: 100px;
height: 20px;
background-color: #ccc;
position: absolute;
top: 680px;
left: 450px;
}
(3)js部分
一, 添加五排(没排十个小方块)
for (var j = 0; j < 5; j++) {
for (var i = 0; i < (1000 / 100); i++) {
var span = document.createElement("span")
span.style.left = a + "px";
a += 100;
span.style.top = b + "px";
document.body.appendChild(span)
}
b += 20;
a = 0;
}
(4)获取选择器
var aspan = document.querySelectorAll("span")
var odiv = document.querySelector(".div");
var op = document.querySelector("p");
(5)小游戏中方向键的绑定效果
document.onkeydown = function(eve) {
var e = eve || window.event;
var code = e.keyCode || e.which;
var taeget = e.target || e.srcElement;
//上下左右控制移动,并设置移动的div的边界;
onoff++;//开关
fn(onoff);//下面会用
//上下左右的绑定,即边界限定(不允许超过边界)
switch (code) {
case 37:
if (odiv.offsetLeft - 20 <= 0) {
odiv.style.left = "0px";
} else {
odiv.style.left = odiv.offsetLeft - 20 + "px";
}
break;
case 38:
if (odiv.offsetTop <= 400) {
odiv.style.top = "400px";
} else {
odiv.style.top = odiv.offsetTop - 20 + "px";
}
break;
case 39:
if (odiv.offsetLeft + 100 >= 1000) { //100是方块的width,
odiv.style.left = 1000 - 100 + "px";
} else {
odiv.style.left = odiv.offsetLeft + 20 + "px"; //20是元素的高度
}
break;
case 40:
if (odiv.offsetTop + 20 >= 700) {
odiv.style.top = 700 - 20 + "px";
} else {
odiv.style.top = odiv.offsetTop + 20 + "px";
}
break;
}
(6)
function fn(n) {
if (n == 1) { //操作5的按键事件触发 , 但是按键事件只能触发一次,所以需要借助开关计时,onoff == 1 时才可以用
var t;
var lSpeed = random(4, 5)*Math.pow(-1,random(1, 2));//设置个水平方向的速度(正负表示向左向右) 随机数 封装在最后
var tSpeed = -random(4, 5); //设置个数值方向的速度(初始速度向上,所以开始时为负值)
clearInterval(t);
t = setInterval(function() {
// 设置小球的边界
// if(op.offsetLeft + lSpeed>=980){
if (op.offsetLeft+lSpeed >= 980) {
// op.style.left = 980 + "px";
lSpeed = lSpeed * (-1); //设置小球的速度方向 触碰到边界就反向
} else if (op.offsetLeft+lSpeed <= 0) {
lSpeed = lSpeed * (-1);
} else {
op.style.left = op.offsetLeft + lSpeed + "px";
}
if (op.offsetTop+tSpeed <= 0) {
tSpeed =tSpeed*(-1);
} else {
op.style.top = op.offsetTop + tSpeed + "px";
} if((op.offsetTop>=odiv.offsetTop-20)&&(op.offsetTop<=odiv.offsetTop)&&
(op.offsetLeft>=odiv.offsetLeft-10)&&(op.offsetLeft<=odiv.offsetLeft+90) //未做精简的部分,比较乱 头脑清晰者课观之,思路奇葩不予讲解
){
// console.log(1)
//bug 开始按上键;
tSpeed =tSpeed*(-1);
} if(op.offsetTop>=690){ // 判断小球出局,游戏结束,所有数据重置
alert("结束");
clearInterval(t);
op.style.left = "490px";
op.style.top = "660px";
odiv.style.top = "680px";
odiv.style.left = "450px";
for(var i=0;i<aspan.length;i++){ //小方块的样式重新显示出来
aspan[i].style.display = "block";
}
onoff = 0; // 开关也重开;
} var l = aspan.length;
for(var i=0;i<aspan.length;i++){
if((op.offsetTop <= aspan[i].offsetTop+20)&&(op.offsetTop >= aspan[i].offsetTop)
&&(op.offsetLeft-10 >= aspan[i].offsetLeft)&&(op.offsetLeft+10 <= aspan[i].offsetLeft+100) )//未做精简的部分,比较乱 头脑清晰者课观之,思路奇葩不予讲解
{
aspan[i].style.display = "none"; //小球和方块相接触 小方块的display:none;
l--;
console.log(l) //测试专用
if(l == 0){
alert("游戏结束") //方块全部消失时,弹出游戏结束;
}
}
} }, 30)
}
}
最后差点忘记
function random(m, n) {
return Math.round(Math.random() * (m - n) + n)
}
完整效果图如下:
:
(7)测试:
bug1:开始按键盘不能按上键, 原因:小球与灰色方块接触返回机制设置(方块的中间的水平线为小球反弹分割线,反复触碰),所以很快速度翻转
bug2:灰色方块去碰弹回来的小球时,如果是侧边接触,会发生bug1,同上
bug3:有些方块看似碰到 缺不消失, 原因,触碰小时规则的书写也许有点不当之处
js消除小游戏(极简版)的更多相关文章
- Underscore源码阅读极简版入门
看了网上的一些资料,发现大家都写得太复杂,让新手难以入门.于是写了这个极简版的Underscore源码阅读. 源码: https://github.com/hanzichi/underscore-an ...
- pixi.js 微信小游戏 入手
pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...
- SimpleThreadPool极简版
package com.dwz.concurrency.chapter13; import java.util.ArrayList; import java.util.LinkedList; impo ...
- HTML5小游戏UI美化版
HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...
- JS写小游戏(一):游戏框架
前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...
- three.js 微信小游戏
最近在 https://classroom.udacity.com/courses/cs291 学习了一些 3D 引擎和 three.js 的知识 把 three.js 弄到微信小游戏里,先随便跑一跑 ...
- 用面向对象的编程方式实现飞机大战小游戏,java版
概述 本文将使用java语言以面向对象的编程方式一步一步实现飞机大战这个小游戏 本篇文章仅供参考,如有写的不好的地方或者各位读者哪里没看懂可以在评论区给我留言 或者邮件8274551712@qq.co ...
- 例子:js超级玛丽小游戏
韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键 ...
- SkiaSharp 之 WPF 自绘 投篮小游戏(案例版)
此案例主要是针对光线投影法碰撞检测功能的示例,顺便做成了一个小游戏,很简单,但是,效果却很不错. 投篮小游戏 规则,点击投篮目标点,就会有一个球沿着相关抛物线,然后,判断是否进入篮子里,其实就是一个矩 ...
随机推荐
- Centos6.5 忘记密码解决方法
问题 原因 : 太久没用centos了 忘记密码了 很尴尬 快照也没说明密码.... 1.重启 centos 在开机启动的时候快速按键盘上的“E”键 或者“ESC”键(如果做不到精准快速可以在启动 ...
- 一句话CF
目录 \(\bf {Round \ \#500 \ (Div. \ 1)}\) \(\bf {Round \ \#589 \ (Div. \ 2)}\) \(\bf {Avito \ Cool \ C ...
- Python 定义动态变量
问题描述 在做数据处理时,对一些分组得来的数据,所做的操作大同小异,变量的命名也都拥有相同的结构,比如对每个月份的数据求均值.方差等统计量,变量的命名可取为“n月的均值”,“n月的方差”,抽象出来就是 ...
- python——掌握sorted函数的用法
看本篇文章的前提是掌握 00函数的基本概念.01函数参数传递方式 可参考本人博客文章 sorted函数 是一个内建函数,接收一个可迭代对象,按照指定类型.指定顺序进行排序,特点是返回一个新的列表,不改 ...
- php session获取不到的解决方法
php session获取不到的解决方法 因为sesson数据是存在服务器端的硬盘一般临时空间不足 /tmp/ 1 这个需要清空下系统盘就可以了2 你可以在空间充足的地方mkdir 文件夹——你可以使 ...
- ES6学习笔记01 -- 暂时性死区 ( temporal dead zone )
参考文档: let 和 const 命令 - ECMAScript6入门 暂时性死区(temporal dead zone) 理解ES6中的TDZ(暂时性死区) ES6 中 let 暂时性死区详解 ...
- iOS地理反地理编码--CoreLocation
.sidebar{float:left;width:220px;} .container-fluid>.content{margin-left:240px;} a{color:#0069d6;t ...
- lqb 基础练习 十进制转十六进制
基础练习 十进制转十六进制 时间限制:1.0s 内存限制:512.0MB 问题描述 十六进制数是在程序设计时经常要使用到的一种整数的表示方式.它有0,1,2,3,4,5,6,7,8,9,A ...
- nyoj 78-圈水池 (凸包)
78-圈水池 内存限制:64MB 时间限制:3000ms 特判: No 通过数:5 提交数:6 难度:4 题目描述: 有一个牧场,牧场上有很多个供水装置,现在牧场的主人想要用篱笆把这些供水装置圈起来, ...
- 【故障公告】数据库服务器 CPU 近 100% 引发的故障(源于 .NET Core 3.0 的一个 bug)
非常抱歉,这次故障给您带来麻烦了,请您谅解. 今天早上 10:54 左右,我们所使用的数据库服务(阿里云 RDS 实例 SQL Server 2016 标准版)CPU 突然飙升至 90% 以上,应用日 ...