别踩白块儿java代码_Javascript别踩白块儿(钢琴块儿)小游戏实现代码
游戏唯一的一个规则,我们只需要不断踩着黑色方块前进即可,这里根据方向键来踩白块
在规定时间内,每走一次分数加100
游戏内的每一排都是一个有四个元素的数组,当正确的踩到黑块前进后,前一个数组内所有的对象样式属性(backgroundColor)赋值给其后一个数组内的对应位置处的对象,便实现了前进的功能,很简单的思想
*{padding: 0;
margin: 0;
}
.div_bg {
width: 410px;
height: 512px;
margin-top: 10px;
border: 1px solid black;
box-shadow: 0px 0px 20px #102327;
}
#score{
margin-top: 10px;
color: #365669;
margin:0 auto;
width: 350px;
height: 80px;
}
.span_1 {
font-size: 3em;
}
.box_list {
border-radius: 100%;
text-align: center;
line-height: 100px;
color: red;
font-size: 2em;
}
.box_list_1 {
border-radius: 100%;
box-shadow: 0px 0px 20px #ff5026;
text-align: center;
line-height: 100px;
color: red;
font-size: 2em;
}
.img{
margin: 0 auto;
margin-top: 15px;
}
.over{
border: 2px solid #23f00f;
border-radius: 20%;
box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px white;
top: 200px;
left: 50%;
margin-left: -150px;
color: black;
line-height: 50px;
text-align: center;
font-size: 20px;
}
.newGame{
border: 2px solid #23fdff;
border-radius: 20%;
box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px green;
top: 350px;
left:50%;
margin-left: -50px;
color: white;
font-size: 16px;
z-index: 9999;
}
.newGame:hover{
border: 2px solid #c05e8c;
color: #A1FEDC;
}
#clock{
font-size: 4em;
color: red;
margin:0 auto;
width: 350px;
height: 80px;
}
var box;
var sum = 0;//全局变量 分数
var oclock=document.getElementById("clock");
var start1 = oclock.innerHTML;
var finish = "00:00:00:00";
var timer = null;//
var Over=new over();//实例化对象结束游戏框
var NewGame=new newGame();//实例化重新开始游戏按钮
var index=false;//标志位哦(用于控制结束游戏框重复出现)
var again=true;//标志位(用于结束游戏后控制无法再踩白块)
box = new showbox();//实例化对象
box.show();//构造游戏白块
window.onkeydown = function (e) {
box.clickinfo(e.keyCode);//获取方向键keyCode值并传参调用函数
}
function onTime()//定义倒计时秒表函数
{
if (start1 == finish)//到达时间执行
{ index=true;
clearInterval(timer);
if(index==true){
//由于后续定时器一直执行,当点击重新开始游戏后会重复出现结束框,所以设置标志位控制只出现一次
Over.createOver();
index=false;
}
return;
}
var hms = new String(start1).split(":");//以:作为分隔符号取字符串内的数据
var ms = new Number(hms[3]);//给每个数据定义对象
var s = new Number(hms[2]);
var m = new Number(hms[1]);
var h = new Number(hms[0]);
ms -= 10;//每次执行ms减10
if (ms < 0)//判断时间并进行变化
{
ms = 90;
s -= 1;
if (s < 0)
{
s = 59;
m -= 1;
}
if (m < 0)
{
m = 59;
h -= 1;
}
}
var ms = ms < 10 ? ("0" + ms) : ms;//如果出现个位数给个位数前面添加0
var ss = s < 10 ? ("0" + s) : s;
var sm = m < 10 ? ("0" + m) : m;
var sh = h < 10 ? ("0" + h) : h;
start1 = sh + ":" + sm + ":" + ss + ":" + ms;
oclock.innerHTML = start1;//重新给oclock赋值
clearInterval(timer);
timer =setInterval("onTime()", 100);
}
function run() {//开始倒计时函数
timer =setInterval("onTime()", 100);
}
function showbox() {//定义构造函数创建白块
this.width = 100;
this.height = 100;
this.border = "1px solid black";
this.float = "left";
this.color = "black";
this.body = [[null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null]];
/*定义一个二维数组,每一个数组中存放的元素代表每一个白块对象一排四个一共五排*/
this.show = function () {
document.getElementsByClassName("span_1")[0].innerHTML = "分数:" + sum;//初始化分数
for (var i = 0; i < this.body.length; i++) {//两重循环动态创建白块和黑块
var ran_num = Math.floor(Math.random() * 4);//去一个(0~3)的随机数,使每一行随机位置出现一个黑块
for (var k = 0; k < this.body[i].length; k++) {
if (this.body[i][k] == null) {//事先判断一下是否已近存在该对象,防止产生多余对象(后续会多次调用该方法)
this.body[i][k] = document.createElement("div");
this.body[i][k].style.width = this.width + "px";//给对象添加属性
this.body[i][k].style.height = this.height + "px";
this.body[i][k].style.border = this.border;
this.body[i][k].style.float = this.float;//让每一个白块浮动
if (k == ran_num) {//随机黑块位置
this.body[i][k].className = "box_list";
this.body[i][k].style.backgroundColor = this.color;
} else {
this.body[i][k].className = "box_list_1";
this.body[i][k].style.backgroundColor = "white";
}
}
document.getElementsByClassName("div_bg")[0].appendChild(this.body[i][k]);
}
}
for(var i=0;i
for(var j=0;j
if(this.body[i][j].style.backgroundColor=="black"){
this.body[i][j].innerHTML="";
//这里我给图片direct0(方向左)direct1(方向上)direct2(方向下)direct3(方向右)命名
}
}
}
}
this.clickinfo = function (code) {//code:传的方向键keyCode值
for (var i = 0; i < 4; i++) {//给最下面一行索引赋值
this.body[4][i].index = i;
}
if (code == 37) {
if (this.body[4][0].style.backgroundColor == "black") {//判断若是方向左键且当前是黑块
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分数:" + sum;//变动分数
clearInterval(timer);
Over.createOver();//现实游戏结束框
again=false;
}
}
if (code == 38) {
if (this.body[4][1].style.backgroundColor == "black") {
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分数:" + sum;
clearInterval(timer);
Over.createOver();
again=false;
}
}
if (code == 40) {
if (this.body[4][2].style.backgroundColor == "black") {
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分数:" + sum;
clearInterval(timer);
Over.createOver();
again=false;
}
}
if (code == 39) {
if (this.body[4][3].style.backgroundColor == "black") {
box.moveinfo();
}
else {
document.getElementsByClassName("span_1")[0].innerHTML = "分数:" + sum;
clearInterval(timer);
Over.createOver();
again=false;
}
}
for(var i=0;i
for(var j=0;j
this.body[i][j].innerHTML="";
if(this.body[i][j].style.backgroundColor=="black"){
this.body[i][j].innerHTML="";
}
}
}
}
this.moveinfo = function () {//踩白块前进功能函数
if (again == true) {
clearInterval(timer);//先清除一次定时器因为后面会再次调用,多余的定时器会让时间加速倒计时
sum += 100;//每走一次加100分
run();//开启倒计时(当第一次走的时候 开始倒计时,标志着游戏开始了)
document.getElementsByClassName("span_1")[0].innerHTML = "分数:" + sum;//每走一次都要动态改变一下当前分数
for (var k = 4; k > 0; k--) {
//把后一排所有块的样式属性变为其前一排块和其相对应位置块的样式属性
// 这里注意:要从最后一排开始赋值,并且第一排的块不算进去
for (var i = 0; i < 4; i++) {
this.body[k][i].style.backgroundColor = this.body[k - 1][i].style.backgroundColor;
}
}
var ran_num = Math.floor(Math.random() * 4);
//取随机数创建第一排黑白块
for (var i = 0; i < 4; i++) {
if (i == ran_num) {
this.body[0][i].style.backgroundColor = "black";
}
else {
this.body[0][i].style.backgroundColor = "white";
}
}
this.show();//每一次踩白块都要调用一下show让全局改变一下
}
}
}
function over(){//定义结束游戏框构造函数
this.width="300px";
this.height="100px";
this.bgColor="#ccc";
this.position="absolute";
this._over=null;
this.className="over";
this.createOver=function(){
if(this._over==null){
this._over=document.createElement("div");
this._over.style.width=this.width;
this._over.style.height=this.height;
this._over.style.backgroundColor=this.bgColor;
this._over.style.position=this.position;
this._over.className=this.className;
this._over.innerHTML="游戏结束得分:"+sum+"";
document.body.appendChild(this._over);
NewGame.createNewGame();
}
}
}
function newGame(){//定义重新开始按钮构造函数
this.width="100px";
this.height="40px";
this.bgColor="#4D5260";
this.position="absolute";
this._newGame=null;
this.className="newGame";
this.createNewGame=function(){
if(this._newGame==null){
this._newGame=document.createElement("button");
this._newGame.style.width=this.width;
this._newGame.style.height=this.height;
this._newGame.style.backgroundColor=this.bgColor;
this._newGame.style.position=this.position;
this._newGame.className=this.className;
this._newGame.innerHTML="重新开始";
document.body.appendChild(this._newGame);
}
var oNewGame=document.getElementsByClassName("newGame")[0];//获取创建后的重新开始按钮
oNewGame.οnclick=function(){//添加点击事件 初始各种对象
sum=0;
again=true;
document.getElementsByClassName("span_1")[0].innerHTML = "分数:" + sum;
document.getElementById("clock").innerHTML="00:00:20:00";
start1="00:00:20:00";
document.getElementsByClassName("newGame")[0].remove();//移除重新开始按钮
document.getElementsByClassName("over")[0].remove();//移除结束游戏框
NewGame._newGame=null;
Over._over=null;
}
}
}
总结
以上所述是小编给大家介绍的Javascript别踩白块儿(钢琴块儿)小游戏实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
别踩白块儿java代码_Javascript别踩白块儿(钢琴块儿)小游戏实现代码相关推荐
- java代码实现打气球游戏_javascript+css3开发打气球小游戏完整代码
效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等. css代码如下: {margin:0;padd ...
- java 300行代码 冒险闯关小游戏(代码+讲解)
作为一个男孩子,从小就喜欢晚一些游戏.今天就用java写一个类似马里奥的冒险闯关小游戏,但这也不是一两天能完成的事情,我将会持续更新这个游戏(有什么好的介意也非常欢迎大家提出来,也能在我的基础上自己 ...
- 【Java】Java基础飞机大战小游戏完整代码
Java基础飞机大战小游戏完整代码 先来展示一下代码实现结果图 主函数ShootGame 初始化游戏原始背景图片,游戏人物图片,游戏开始结束图片:构建产生敌人算法:产生英雄机算法:发射子弹算法:判断是 ...
- python 贴吧盖楼_ es6 + canvas 开源 盖楼小游戏 完整代码注释 从零教你做游戏(一)...
盖楼游戏 一个基于 Canvas 的盖楼游戏 Demo 预览 手机设备可以扫描下方二维码 github Game Rule 游戏规则 以下为默认游戏规则,也可参照下节自定义游戏参数 每局游戏生命值为3 ...
- [新手必备]Unity推箱子小游戏C#代码详解(第一篇-代码部分)
完整项目请参考博客:https://blog.csdn.net/qq_41676090/article/details/96300302 本文为推箱子小游戏C#代码详解第一篇的代码部分,主要讲解 Sy ...
- python十点半游戏代码_Python实现Pig Latin小游戏实例代码
前言: 本文研究的主要是Python实现pig Latin小游戏的简单代码,具体介绍如下. Pig Latin是一个语言游戏. 步骤: 1.让用户输入一个英文单词 2.确保用户输入一个有效单词 3.将 ...
- C++ 简化 推箱子 小游戏 完整代码 参考网络资料 命令行运行 仅供初学者参考交流
C++ 简化 推箱子 小游戏 完整代码 参考网络资料 命令行运行 仅供初学者参考交流 说明:学做了4关推箱子, 仅供初学者参考可用g++ 编译,可以将内容复制到TXT文件,将后缀改为".cp ...
- Friends小游戏完整代码
Friends小游戏完整代码 Mover[] movers = new Mover[10]; Attractor a; int num = 50; int maxnum = 10001; int r ...
- 贪食蛇php,贪吃蛇网页小游戏的代码
贪吃蛇网页小游戏的代码 ::selection { color:#FFFFFF; background:transparent; } ::-moz-selection { color:#FFFFFF; ...
- JAVA小游戏有源代码,非常详细的注释,以及自己做的答辩PPT
JAVA小游戏--阴阳师版三国战纪 阴阳战纪 具体的实现方法 程序 效果 阴阳战纪 由于疫情原因,我们班的生产实习被告知要在线上举行,然后老师给我们上了三天的网课,教我们用JAVA来制作一个小游戏,因 ...
最新文章
- 官宣!清华大学要搬迁!
- R语言绘制不一样的条形图
- MySQL 5.6 5.7最优配置文件模板
- uboot源码——命令体系
- 怎样能确保计算机安全,如何确保电脑安全
- AWS RDS强制升级的应对之道——版本升级的最佳实践
- 腾讯 2017 年投资项目榜单 TOP 10,与阿里死磕到底?
- iframe调用父页面js方法_JS高级技巧
- 工作中使用到的单词(软件开发)_20210402备份
- Jmeter接口性能测试分布式的环境搭建
- 微信公众帐号迁移流程指引
- 微信小程序:用户点击跳转付款码界面
- jQuery常用API(六)
- win10突然无法显示图片缩略图怎么办
- mac safari无法连接服务器_safari浏览器不能连接服务器什么意思苹果电脑
- Pytorch错误集锦
- 【Cloudaily】大数据国家工程实验室揭牌,华为发布OpenLab全球建设计划
- python下载笔趣阁小说生成txt文档
- 万亿市值家电巨头“齐聚”汽车赛道,美的“寻求”兼并收购
- PPT教程:码垛机器人及其操作应用
热门文章
- vue代码查重(任意格式文件)
- 3dB短缝波导耦合器设计
- 完美发布带摘要的dedecms幻灯片代码
- android数独游戏数据库分析,基于Android实现数独游戏
- html5 retina 1像素,7种方法解决移动端Retina屏幕1px边框问题
- lilo是什么意思_lilo是什么意思_lilo的用法_lilo造句_趣词词典
- ctf web 的一些writeup jwt以及黑客游戏
- DeepFool笔记:对原理的理解和公式推导(多分类)
- 告别windows,拥抱ubuntu
- 网件RAX70 SWRT固件和刷机/救砖教程