网站分享到微信缩略图,河北省建设工程安全生产网站,合肥房地产交易网,纯免费建站用H5新特性实现别踩白块小游戏。
功能分析#xff1a; 1.游戏开始按钮 2.每点中一个记一分 3.分数达到二十弹出鼓励弹框 4.点击错误则游戏结束
效果演示 看了效果有没有急迫的心情呢#xff1f;
代码演示
body内容
bodyh2本次得分/h2h2 id…用H5新特性实现别踩白块小游戏。
功能分析 1.游戏开始按钮 2.每点中一个记一分 3.分数达到二十弹出鼓励弹框 4.点击错误则游戏结束
效果演示 看了效果有没有急迫的心情呢
代码演示
body内容
bodyh2本次得分/h2h2 idscore0/h2div idmaindiv idcondiv classrowdiv classfang/divdiv classfang one/divdiv classfang/divdiv classfang/div/divdiv classrowdiv classfang/divdiv classfang one/divdiv classfang/divdiv classfang/div/divdiv classrowdiv classfang/divdiv classfang/divdiv classfang one/divdiv classfang/div/divdiv classrowdiv classfang one/divdiv classfang/divdiv classfang/divdiv classfang/div/div/div/divdiv classstart开始游戏/div/bodyCSS演示
style typetext/css#score {text-align: center;}h2 {text-align: center;}div {margin: 0 auto;width: 100px;height: 100px;}#main {width: 400px;height: 600px;background: blanchedalmond;border: 2px solid gray;margin: 0 auto;position: relative;overflow: hidden;}#con {width: 100%;height: 400px;position: relative;top: -100px;/*隐藏最上层一行*/border-collapse: collapse;}.row {height: 100px;width: 100%;}.fang {height: 100px;width: 100px;float: left;}.one {background: blueviolet;}.start {margin-top: 20px;width: 150px;height: 50px;border-radius: 10px;background: yellowgreen;line-height: 50px;text-align: center;color: #fff;}/styleJavaScript内容
script//根据id获取元素function $(id) {return document.getElementById(id);}var clock null;var state 0;var speed 4;/** 初始化 init*/function init() {for (var i 0; i 4; i) {createrow();}//添加onclick事件$(main).onclick function(ev) {ev ev || eventjudge(ev);}//定时器 每30毫秒调用一次move()clock window.setInterval(move(), 50);}//判断是否点击紫块function judge(ev) {if (state 3) {alert(请刷新此页面重新开始游戏)return;}if (ev.target.className.indexOf(one) -1) {fail();} else {//点击目标元素ev.target.className fang;ev.target.parentNode.pass 1;score();}}//游戏结束function fail() {clearInterval(clock);state 3;confirm(你的最终得分为 parseInt($(score).innerHTML));}//创建divfunction creatediv(className) {var div document.createElement(div);div.className className;return div;}function createrow() {var con $(con);var row creatediv(row);var arr createcell();con.appendChild(row);for (var i 0; i 4; i) {row.appendChild(creatediv(arr[i]));}if (con.firstChild null) {con.appendChild(row);} else {con.insertBefore(row, con.firstChild);}}//创建一个类名的数组function createcell() {var temp [fang, fang, fang, ];var i Math.floor(Math.random() * 4);temp[i] fang one;return temp;}//移动黑色块function move() {var con $(con);var top parseInt(window.getComputedStyle(con, null)[top]);if (speed top 0) {top 0;} else {top speed;}con.style.top top px;if (top 0) {createrow();con.style.top -100px;delrow();} else if (top (-100 speed)) {var rows con.childNodes;if ((rows.lenth 5) (rows[rows.length - 1].pass ! 1)) {fail();}}}//加快速度function speedup() {speed 2;if (speed 20) {alert(你真厉害继续加油呦);}}//删除行function delrow() {var con $(con);if (con.childNodes.length 6) {con.removeChild(con.lastChild);}}//计算得分function score() {var newscore parseInt($(score).innerHTML) 1;$(score).innerHTML newscore;if (newscore % 10 0) {speedup();}}document.querySelector(.start).addEventListener(click, init)/script
