一、打字机效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>打字机效果</title><script>window.onload=function(){//如何播放背景声音var ao = document.getElementById("ao");var str = "学渣|关羽正是上课讲的是加法|抠脚大汉上课了积分卡洛斯n6";var index = 0;window.setInterval(function(){//配音ao.play();if(index == str.length){index = 0;}//截取需要的写到文本域中的内容var ctx = str.substring(0,index);document.getElementById("msg").innerHTML = ctx;index++;},200)ao.play();}</script></head><body><textarea id="msg" cols="20" rows="5"></textarea><audio id="ao" width="0px" height="0px" preload="auto" autoplay="autoplay">抱歉，你的浏览器不支持audit标签<source src="./type.mp3" type="audio/mp3"></source> <!-- 打字机音效 --></audio></body>
</html>

二、canvas画时钟

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>HTML5 时钟</title><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><style>.clocks {height: 500px;margin: 25px auto;position: relative;width: 500px;}</style>
</head><script>// inner variablesvar canvas, ctx;var clockRadius = 250;var clockImage;// draw functions :function clear() { // clear canvas functionctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);}function drawScene() { // main drawScene functionclear(); // clear canvas// get current timevar date = new Date();var hours = date.getHours();var minutes = date.getMinutes();var seconds = date.getSeconds();hours = hours > 12 ? hours - 12 : hours;var hour = hours + minutes / 60;var minute = minutes + seconds / 60;// save current contextctx.save();// draw clock image (as background)ctx.drawImage(clockImage, 0, 0, 500, 500);ctx.translate(canvas.width / 2, canvas.height / 2);ctx.beginPath();// draw numbersctx.font = '36px Arial';ctx.fillStyle = '#000';ctx.textAlign = 'center';ctx.textBaseline = 'middle';for (var n = 1; n <= 12; n++) {var theta = (n - 3) * (Math.PI * 2) / 12;var x = clockRadius * 0.7 * Math.cos(theta);var y = clockRadius * 0.7 * Math.sin(theta);ctx.fillText(n, x, y);}// draw hourctx.save();var theta = (hour - 3) * 2 * Math.PI / 12;ctx.rotate(theta);ctx.beginPath();ctx.moveTo(-15, -5);ctx.lineTo(-15, 5);ctx.lineTo(clockRadius * 0.5, 1);ctx.lineTo(clockRadius * 0.5, -1);ctx.fill();ctx.restore();// draw minutectx.save();var theta = (minute - 15) * 2 * Math.PI / 60;ctx.rotate(theta);ctx.beginPath();ctx.moveTo(-15, -4);ctx.lineTo(-15, 4);ctx.lineTo(clockRadius * 0.8, 1);ctx.lineTo(clockRadius * 0.8, -1);ctx.fill();ctx.restore();// draw secondctx.save();var theta = (seconds - 15) * 2 * Math.PI / 60;ctx.rotate(theta);ctx.beginPath();ctx.moveTo(-15, -3);ctx.lineTo(-15, 3);ctx.lineTo(clockRadius * 0.9, 1);ctx.lineTo(clockRadius * 0.9, -1);ctx.fillStyle = '#0f0';ctx.fill();ctx.restore();ctx.restore();}// initialization$(function () {canvas = document.getElementById('canvas');ctx = canvas.getContext('2d');// var width = canvas.width;// var height = canvas.height;clockImage = new Image();clockImage.src = 'https://static.runoob.com/images/mix/125855_nnla_89964.png';setInterval(drawScene, 1000); // loop drawScene});
</script><body><header><h2>HTML5 时钟</h2></header><div class="clocks"><canvas id="canvas" width="500" height="500"></canvas></div>
</body></html>

三、随机方块

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>随机方块</title><script>// 步骤:// 1、声明方块的构造方法// 2、创建方块的数组// 3、得到页面中的div// 4、设置方块数组中的每个方块的属性// 5、将创建的方块添加到获取到的div中var colors=["red","green","yellow","pink","orange","blue","purple"];var fangkuai=function(width,height,color,top,left){this.width=width;this.height=height;this.color=color;this.top=top;this.left=left;}var fangkuais=[//要使用随机得到颜色，这个颜色我们就使用声明的数组中的颜色，下标随机，所以颜色随机new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500))];function dedaodiv(){//得到页面中的这个div元素var div1=document.getElementById("div1");//创建一个divfor(var j of fangkuais){var creatediv=document.createElement("div");//设置一下创建的这个div的属性creatediv.style.width=j.width;creatediv.style.height=j.height;creatediv.style.backgroundColor=j.color;creatediv.style.top=j.top+"px";creatediv.style.left=j.left+"px";//创建的这个div需要绝对定位creatediv.style.position="absolute";//将创建的元素添加到它的子元素中div1.appendChild(creatediv);}}window.onload=function(){dedaodiv();}</script></head><body><div id="div1" style="width:500px; height:500px; position:relative;margin:0px auto; background-color: darkgray;"></div></body>
</html>

四、简易计算器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#div_main{width:270px; height:400px; margin:0px auto; border:1px solid red;}#div1{width:230px; height:50px; margin:0px auto;margin-top:40px;  text-align:center;}#txt{width:220px; height:30px; text-align:right;}#div2{width:230px; margin:0px auto; text-align:center;}#div2 input {width:35px; height:35px; margin: 7px;}</style><script>window.onload=function(){//获取文本框var text=document.getElementById("txt");var div2=document.getElementById("div2");var diyici,fuhao;//去获取所有的按钮var inputs=div2.getElementsByTagName("input")//给每个按钮添加一个事件for(var i of inputs){i.onclick=function(){if(!isNaN(this.value)){//这个没考虑到0的问题
//                           text.value=(Number(text.value+this.value))*1;//这个有问题
//                           text.value.chatAt(1) !=0 ? text.value=text.value+this.value : text.value=(text.value+this.value)*1;if(Number(this.value)==0){if(text.value>0 || text.value.indexOf(".")>0){text.value=text.value+this.value;}}else {text.value=(text.value+this.value)*1;}}else{switch(this.value){case '+':case '-':case '*':case '/':diyici=text.value;text.value="0";fuhao=this.value;break;case 'C':text.value="0";break;case '←':
//                                   text.value=text.value.substr(0,text.value.length-1);
//                                   if(text.value.length==0){
//                                      text.value="0";
//                                   }text.value=text.value.length>1?text.value.substr(0,text.value.length-1):"0";break;case '+/-'://判断文本框中的内容是不是包含'-';//使用indexOf去判断字符串的内容text.value=text.value.indexOf("-")==-1?'-'+text.value:text.value.substr(1);break;case '.':text.value=text.value.indexOf(".")==-1?text.value+'.':text.value; break;case '=':var dierci=text.value;switch(fuhao){//默认以为是字符串，会做字符串拼接操作，所以要转型case '+':text.value=Number(diyici)+Number(dierci);break;case '-':text.value=Number(diyici)-Number(dierci);break;case '*':text.value=Number(diyici)*Number(dierci);break;case '/':if(Number(dierci)==0){text.value=0;}else{text.value=Number(diyici)/Number(dierci);break;}}}}}}}
//          function dianji(a){
//              var text=document.getElementById("txt");
//              var anniu=a.value;
//              text.value=text.value+anniu;
//          }</script></head><body><div id="div_main"><div id="div1"><input type="text" id="txt"/></div><div id="div2"> <input type="button" value="C"/> <input type="button" value="←"/> <input type="button" value="+/-"/> <input type="button" value="+"/> <input type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <input type="button" value="-"/> <input type="button" value="4"/> <input type="button" value="5"/><input type="button" value="6"/><input type="button" value="*"/> <input type="button" value="7"/> <input type="button" value="8"/> <input type="button" value="9"/> <input type="button" value="/"/> <input type="button" value="0"/> <input type="button" value="."/> <input type="button" value="="/> <input type="button" value="m"/> </div></div></body>
</html>

五、摇骰子

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body {display: flex;justify-content: center;align-items: center;min-height: 100vh;}.dice {background-image: url(https://assets.codepen.io/2002878/random-dice.png);width: 366px;height: 366px;background-position: 0% 100%;animation: .2s steps(5, start) random infinite;}@keyframes random {to {background-position: 100% 100%;}}#dice {display: none;}#dice:checked + label .dice {animation-play-state: paused;}.dice::before {content: '?';background-color: rgba(255, 255, 255, .8);width: inherit;height: inherit;display: flex;justify-content: center;align-items: center;font-size: 320px;font-family: Helvetica;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border-radius: 60px;}#dice:checked + label .dice::before {display: none;}</style></head><body><input type="checkbox" id="dice"><label for="dice"><div class="dice"></div></label></body></html>

JS的游戏-打字机-时钟-随机方块-计算器-摇色子相关推荐

c语言a 寻路算法,JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
本文实例讲述了JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法.分享给大家供大家参考,具体如下: 完整实例代码如下: A*寻路算法 #stage { border: 1px solid lig ...
js小游戏（飞行的小鸟--canvas）
js小游戏 (飞行的小鸟) 这个里面用到的主要是 canvas 绘图 <!DOCTYPE html> <html><head><meta charset=&q ...
是男人就要坚持30秒：原生JS小游戏
在继之前完成的数个JavaScript demo后,我发现我还没有写过JS小游戏,这次呢,我就来分享一个,非常经典的"是男人就要坚持30s"的小游戏.当然我肯定 is a man, ...
Node.js联机游戏——gobang五子棋（客户端+服务端+websocket的双人游戏）
Node.js联机游戏--gobang五子棋(客户端+服务端+websocket的双人游戏) 五子棋的基本结构 ~·基本画图 ~·判断机制 ~···横向/竖向判断 ~···斜向判断搭建服务器阶段 ~ ...
Html+JS+Css 实现动物赛跑随机速度
Html+JS+Css 实现动物赛跑随机速度 <!DOCTYPE html> <html><head><meta charset="UTF-8&qu ...
【JavaScript】（一）解读一个js小游戏
[前言] 离公司近的好处,就在于每天都能利用自己的下班时间,更好地查漏补缺,充实技能. 最近小编做的项目需要写js偏多,而我不擅长写前端js,利用工作之余,开始学习,下面通过一个成型的js小游戏,开始 ...
用html做12进制时钟特效,js+css3实现简单时钟特效
本文实例为大家分享了js+css3实现简单时钟的具体代码,供大家参考,具体内容如下 1.实现了时钟的特效,可以转动,时间准确,画面美观大气: 2.用到了css3的transform: rotate,t ...
java五子棋悔棋代码_小猿圈前端编写JS五子棋游戏
前段时间发的飞机大战的游戏很多小伙伴都私聊让再做个游戏,今天小猿圈web前端讲师为大家分享的是JS五子棋的游戏,想玩的小伙伴记得自己运行一下呦. JS五子棋游戏代码: 五子棋 canvas { dis ...
虚幻引擎 js开发游戏_通过编码3游戏学习虚幻引擎4-5小时免费游戏开发视频课程
虚幻引擎 js开发游戏 One of the most widely used game engines is Unreal Engine by Epic Games. On the freeCode ...

JS的游戏-打字机-时钟-随机方块-计算器-摇色子

一、打字机效果

二、canvas画时钟

三、随机方块

四、简易计算器

五、摇骰子

JS的游戏-打字机-时钟-随机方块-计算器-摇色子相关推荐

最新文章

热门文章