web学习(2)--别踩白块儿(js版)(web入门)

废话不多说，就是一个简单的网页版的别踩白块儿 (踩到白块会弹出窗口，手动点击确定才能继续游戏，达到耗费你的游戏时间的目的)

HTML:（注意js文件的名字和所放位置，如果和我命名的不一样，注意在第六行修改）

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>别踩白块</title><script src="js/brick.js"></script>   <!--注意js文件的名字--> <style>#cns{           /* 画布*/border:solid 1px black;margin-left: 100px;}#timer_dash{     /*计时器*/color: red;}</style></head><body><button οnclick="Game.Start()">开始游戏</button>     <!--开始按钮触发游戏开始--><p>时间：<span id='timer_dash'></span> 秒</p>    <canvas id='cns' width="200px"  height="300px"></canvas> <script>var Game=new Brick(document.querySelector('#cns'),     //new一个新对象出来  传参画布与计时器document.querySelector('#timer_dash'));</script></body>
</html>

JavaScript:

var Model=function(canvas,timer_dash){   //传参var me=this;me.canvas=canvas;me.context=canvas.getContext('2d');me.time_dash=timer_dash;me.bricks=new Array();      //砖块数组me.cols=4;                   //4列me.rows=6;                    //6排me.brickWidth=me.canvas.width/me.cols;me.brickHeight=me.canvas.height/me.rows;me.clickBrick();            //点击砖块
}Model.prototype.Draw=function(){             //画var me=this;me.context.clearRect(0,0,me.canvas.width,me.canvas.height);me.drawGrid();          //画出方格me.drawBricks();        //画出砖块
}Model.prototype.Start=function(){     //开始游戏var me=this;me.totalRows=10;                     //总的砖块数  可以设置几十个甚至几百个  如果你无聊的话==me.startTime=new Date();           //记录游戏开始时间me.interval=setInterval(function(){         //每110ms循环调用函数 （显示时间）var timerTxt=new Date()-me.startTime;        //现在时间减去开始时间等于显示的时间timerTxt=(timerTxt/1000|0)+'.'+(timerTxt%1000|0);    //自动转换成字符串me.time_dash.innerHTML=timerTxt;                     },110);me.initBricks();       //初始化砖块me.Draw();
}Model.prototype.drawGrid=function(){  //画出方格var me =this;var ctx=me.context;ctx.beginPath();for(var i=1;i<me.cols;i++){           //绘制列ctx.moveTo(i*me.brickWidth,0);ctx.lineTo(i*me.brickWidth,me.canvas.height);}for(var i=1;i<me.rows;i++){            //绘制行ctx.moveTo(0,i*me.brickHeight);ctx.lineTo(me.canvas.width,i*me.brickHeight);}ctx.stroke();ctx.closePath();
}Model.prototype.initBricks=function(){var me=this;for(var i=0;i<me.rows;i++){me.bricks[i]=Math.random()*me.cols|0;  //每一行的砖块出现在哪一列是随机的}
}Model.prototype.drawBricks=function(){         //填充颜色var me =this;var ctx=me.context;for(var i=0;i<me.rows;i++){var currColValue = me.bricks[i];if(currColValue != -1) {var x = currColValue*me.brickWidth;var y = i*me.brickHeight;ctx.fillRect(x,y,me.brickWidth,me.brickHeight);}}
}Model.prototype.GetClickedBrick=function(e){      //得到鼠标点击的砖块的信息var me=this;var x=e.offsetX/me.brickWidth|0;var y=e.offsetY/me.brickHeight|0;if(me.bricks[y]===x){return {row:y,color:'black'};}else return {row:y,color:'white'};
}Model.prototype.clickBrick=function(){    //鼠标点击var me =this;me.canvas.addEventListener('click',function(e){     //在canvas上注册一个监听器对象var position=me.GetClickedBrick(e);          //得到鼠标点击的砖块的信息if(position.color==='white'){           //踩到白块alert("你猜到白块了！！！");         }else if(position.row===me.rows-1){        //踩到最后一排的黑色砖块me.bricks.pop();                      //从数组尾部删除最后一排的砖块信息me.totalRows--;                       //总的行数减一if(me.totalRows>=me.rows){me.bricks.unshift(Math.random()*me.cols|0);        //往砖块数组头部添加}else me.bricks.unshift(-1);                //-1表示这一排没有砖块if(me.totalRows===0){alert('恭喜你通关了! 你用了 ' + (new Date() - me.startTime)/1000 + ' 秒。');clearInterval(me.interval);          //取消由 setInterval()设置的timeout  参数必须是由 setInterval()返回的ID值}me.Draw();}})
}
window.Brick=Model;

web学习(2)--别踩白块儿(js版)(web入门)相关推荐

初学JS——利用JS制作的别踩白块儿（街机模式）小游戏
初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是可能普通模式的别踩白块儿因为他的"块儿"是 ...
Cocos别踩白块儿案列1
Cocos 版本3.10 1.游戏介绍: <别踩白块儿>是由 Umoni Studio (Umoni Entertainment Limited 的前身)"制作的一款休闲益智游 ...
QT 小游戏 : 别踩白块儿~
一.实现思路 QPainter 绘制游戏界面 PS:根据方块坐标链表绘制所有方块支持两种操作方式 PS:鼠标事件和键盘事件(Q,W,E,R,T) 定时器(10ms) 刷新方块坐标数据根据得 ...
python+opencv别踩白块儿游戏辅助，一天一个opencv小项目（已开源）
python+opencv别踩白块儿游戏辅助,一天一个opencv小项目(已开源) 见链接
别踩白块儿开源免费(C++)
别踩白块儿(C++) 演示视频调用EasyX图形库,电脑没有安装图形库的话,无法运行 EasyX下载源码下载 //主要代码,源码请下载源码文件//游戏开始 void Begin() {MOUSEM ...
团队项目代码分析（Android游戏：别踩白块儿）
代码组成部分: 关键代码主要分为三大部分,如下图所示(用思维导图的形式展示): 代码调用关系通过MainActivity调用其他类❤,具体见核心代码分析! 核心代码分析 public class P ...
基于Linux、QT、C++的“别踩白块儿”小游戏
基于Linux.QT.C++的"别踩白块儿"小游戏源码链接一.功能实现完善的游戏界面.游戏倒计时.得分记录.历史最高分显示二.功能描述 1.界面为4*4,一行中只有一个黑块 ...
python 4399别踩白块儿脚本
持续无聊中,看到别踩白块儿觉得这个脚本貌似比较好写. 需要用到的python 库如下 import pyautogui from PIL import ImageGrab, Image import ...
傅小森的游戏制作之路-别踩白块儿
项目前言别踩白块儿这- 还用开发吗? 别人已经制作了呀触屏版本多的是是挺多的但是你见过按键版本的嘛? 没见过吧这就是需要开发出来 , 进入项目需求环节项目需求别踩白块儿顾名思义:不 ...

web学习(2)--别踩白块儿(js版)(web入门)

web学习(2)--别踩白块儿(js版)(web入门)相关推荐

最新文章

热门文章