Js实现别踩白块儿小游戏
通过HTML+CSS+JS实现别踩白块儿小游戏
上代码
感兴趣的朋友可以加我QQ聊一聊具体实现思路：526772254
<!--Author: Catalog Spri-->
<!--date: 2018/12/25-->
<!--time: 9:06 PM-->
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>别踩白块儿!!!</title><style>* {margin: 0;padding: 0;list-style: none;}.box {width: 400px;height: 520px;background-color: #8af3ff;margin: 40px auto;position: relative;overflow: hidden;}.begin {width: 400px;height: 520px;position: absolute;z-index: 666;font: 900 50px/520px "STSong";text-align: center;background-color: rgba(0, 0, 0, 0.5);cursor: pointer;}.begin span {line-height: 520px;cursor: pointer;}.scroll {width: 400px;height: 130px;/*background-color: #900b09;*/position: absolute;top: -130px;}.scroll ul {width: 400px;}.scroll ul li {float: left;width: 98px;height: 128px;border: 1px solid black;}</style>
</head>
<body>
<div class="box"><div class="scroll"><ul><li></li><li></li><li></li><li></li></ul></div><div class="begin"><span>开始游戏</span></div>
</div>
</body>
<script>// 获取需要用到的标签var box = document.querySelector('.box');var begin = document.querySelector('.begin');var scroll = document.querySelector('.scroll');var timer = null;// 绑定事件begin.onclick = function () {this.style.display = 'none';box.style.border = '1px solid black';box.style.backgroundColor = 'white';// 清除上次游戏残留行scroll.innerHTML = "";// 游戏开始beginGame()};// 开始游戏function beginGame() {// 速度var speed = 5;// 得分var score = 0;// 设置定时器timer = setInterval(function () {// 假装是向下滚动scroll.style.top = scroll.offsetTop + speed + 'px';// 滚动一整行则创建新行if (scroll.offsetTop >= 0) {createNewRow();scroll.style.top = '-130px';}// 绑定事件targetscroll.onclick = function (ev) {var target = ev.target;if (target.className == 'tag') {target.style.backgroundColor = "#bbb";target.className = '';score++;} else {scroll.style.top = 0;begin.innerHTML = '得分: ' + score;clearInterval(timer);begin.style.display = "block";}// 加速if (score % 20 == 0) {speed++;}}// 删除第一行if (scroll.children.length == 6) {for (var i = 0; i < 4; i++) {if (scroll.children[scroll.children.length - 1].children[i].className == 'tag') {scroll.style.top = '-130px';begin.innerHTML = '得分: ' + score;clearInterval(timer);begin.style.display = "block";}}scroll.removeChild(scroll.children[scroll.children.length - 1]);}}, 20)}// 产生新行function createNewRow() {var row = document.createElement('ul');var index = randomNum(0, 3);for (let i = 0; i < 4; i++) {var li = document.createElement('li');row.appendChild(li);}if (scroll.children.length == 0) {scroll.appendChild(row)} else {scroll.insertBefore(row, scroll.children[0])}row.children[index].style.backgroundColor = 'black';row.children[index].className = "tag";}// 产生随机数函数function randomNum(m, n) {return parseInt(Math.random() * (n - m + 1)) + m;}</script>
</html>
Js实现别踩白块儿小游戏相关推荐
- 原生html小游戏,原生JS实现别踩白块小游戏（一）
对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验.那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成. ...
- 基于Linux、QT、C++的“别踩白块儿”小游戏
基于Linux.QT.C++的"别踩白块儿"小游戏 源码链接 一.功能实现 完善的游戏界面.游戏倒计时.得分记录.历史最高分显示 二.功能描述 1.界面为4*4,一行中只有一个黑块 ...
- 别踩白块html源码,原生JS实现别踩白块小游戏（七）
在前面的文章<原生JS实现别踩白块小游戏(六)>中,为大家介绍了实现别踩白块小游戏的js代码中移动效果的方法概述. 下面我们就继续结合源代码中js代码部分,为大家介绍具体的实现方法. 相关 ...
- 原生 JS 实现别踩方块儿小游戏 - 超简单
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志.--苏轼 案例效果 原生 JavaScript 实现的 别踩方块小游戏案例效果如下所示: 案例分析 静态页面 将这个静态页面可以划分为四个部分,如下图 ...
- 微信小程序合集源码I（机器人聊天+仿别踩白块儿小游戏+仿步步高电子词典+仿知乎+日记+汉字拼音+转盘抽奖）
- 练手小项目——别踩白块小游戏
参考:html5实现简单别踩白块小游戏 - XieYingpeng - 博客园 效果: 代码: <!DOCTYPE html> <html lang="en"&g ...
- 原生js实现（别踩白块小游戏）
原生js实现简单的小游戏,巩固原生js基础知识 js部分有详细注释 <!DOCTYPE html> <html lang="en"> <head> ...
- html5合影拍照小游戏,html5实现简单别踩白块小游戏
属于简化版别踩白块,代码相对较为简单易学,主要涉及通过 javascript 操作元素节点的增删以及属性节点(class)的操作. HTML/CSSJavaScript元素节点增删属性节点操作 在开始 ...
- jQuery实现别踩白块小游戏(简易版)
别踩白块分享 这是个漫长的寒假,编程使我快乐.在学习jQuery时,在家练习做了这个小游戏,也算是提升一下实际使用能力. 现在记录下来给大家参考,不足之处请大家谅解. 先上截图: 使用代码前请先导入j ...
- 使用js实现“别踩白块儿”游戏
界面如下: 点击"开始游戏","白格"将开始向下移动,此后再每一行上开始出现一个"黑格",对应列上按下对应的键即可消除黑格,但不可跨行消除( ...
最新文章
- R语言ggplot2可视化：组合箱图（boxplot）和直方图(histogram)输出组合可视化结果
- python windows系统_python管理windows系统tomcat服务
- springboot项目 tomcat8.x 频繁宕机 原因分析
- Xavier上的第一个I2C驱动
- 也谈政府机关服务器资源的有效利用
- [ZJOI2008]生日聚会
- window xp系统安装php环境_在Windows XP下安装Apache+MySQL+PHP环境
- 3D变形tranform（附实例、图解）
- 阿里巴巴矢量图标库在线链接使用图标
- 使用ThreeJs搭建BIM模型浏览器，超大模型的分时渲染
- qt5把qt_zh_CN.qm加载了，但QTextEdit的右键菜单仍然是英文，而QLineEdit的倒是中文。怎样设置使得QTextEdit的右键菜单是中文
- kindle的xray怎么用_Kindle 使用小技巧之 X-Ray 功能
- 【论文笔记】AVSM：结合了仿射配准和vSVF配准的医学图像配准模型
- 智慧公厕解决方案 智能厕所系统方案
- 【明解C语言】之指针初阶详解
- TOEFL wordlist 6
- Python qrcode 生成个性的透明二维码
- 第十讲 老子智慧与人际交往的识人
- 计算机网络期末复习知识点大全
- 多用户商城系统如何选择客服系统？