Html5 小球键盘移动

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
</head>
<body οnkeydοwn="test()"><h1>小球上下移动</h1><canvas id="test" width="400px" height="300px" style="background-color: black"></canvas><script type="text/javascript">//得到画布var canvas1 = document.getElementById("test");//取得画布画笔对象var cxt = canvas1.getContext("2d");//画出红色圆球
        cxt.beginPath();cxt.fillStyle = "#FF0000";cxt.arc(30, 30, 10, 0, 360, true);cxt.closePath();cxt.fill();//键盘发生事件 让小球移动 w d s a//按下一个键，实际上触发一个onkeydow事件var ballX = 30;var bally = 30;function test() {cxt.clearRect(0,0,400,300);var code = event.keyCode;switch (code) {case 87:bally--;break;case 68:ballX++;break;case 83:bally++;break;case 65:ballX--;break;}drawBall();}//重新绘制
        function drawBall() {cxt.beginPath();cxt.fillStyle = "#FF0000";cxt.arc(ballX, bally, 10, 0, 360, true);cxt.closePath();cxt.fill();}</script>
</body>
</html>

转载于:https://www.cnblogs.com/yzenet/p/3866572.html

Html5 小球键盘移动相关推荐

html5页面被键盘挡住,HTML5 虚拟键盘出现挡住输入框怎么办
本文主要介绍了HTML5 虚拟键盘出现挡住输入框的解决办法.具有很好的参考价值,下面跟着小编一起来看下吧,希望能帮助到大家. 话不多说,请看代码: //防止键盘把当前输入框给挡住 $$('input[ ...
HTML5 虚拟键盘出现挡住输入框的解决办法
//防止键盘把当前输入框给挡住 $$('input[type="text"],textarea').on('click', function () { var target = ...
html5手机底部输入框,html5 虚拟键盘弹出挡住底部的输入框解决方案
问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...
php手机网页弹出软键盘代码,Html5页面上如何禁止手机虚拟键盘弹出
工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签: 但是在移动端,input会默认触发手机的虚拟键盘,如何阻止手机虚拟键盘弹起呢?目前我试过有两个方案,一个是给input添加rea ...
站长之家html视频播放,HTML5视频发展状况
5.自适应流自适应流是在线视频的一个核心组成部分.它能够实现:缓冲控制,流内质量调整,live/dvr以及密码和DRM安全机制.自适应流并不属于 HTML5标准,但是浏览器可以通过从HTML5的&l ...
改变手机浏览器(iPhone/Android)上文本输入框的默认弹出键盘
iPhone/iPad和Android提供不同的的键盘输入类型,触发合适的键盘将极大地改善用户体验. 键盘类型默认: 默认键盘的字母模式数字: 默认键盘的数字模式,(含小数点等) 邮件: 与默 ...
编程迷宫_跟我学编程第十期——迷宫游戏
编程改变世界图源:APPLE官网 01 效果演示 IEffect demonstration 跟我学编程公益课程又和你见面了!这期ray老师将带大家来学习编程制作一个迷宫小游戏! 怎么样,你也 ...
Java小程序之球球大作战（基于Java线程实现）
Java小程序之球球大作战(基于Java线程实现) 一.游戏基本功能: 1.自己的小球可以随着鼠标的移动而改变坐标: 2.敌方小球不断的在界面中移动 3.当检测到敌方小球相互碰撞时,小球会弹开 4.当 ...
7个Web前端极其精美的动画效果模板
1. jQuery动态随机背景滚动源码下载 / 在线演示 2. jquery animate分页按钮源码下载 / 在线演示 3. html5+css3日食场景特效源码下载/ 在 ...

Html5 小球键盘移动

Html5 小球键盘移动相关推荐

最新文章

热门文章