TurboWord文字编辑器

by CosmicBear11

85 lines1.7 KB🛠️ p5.js (creative coding)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{margin:0;display:flex;justify-content:center;background:#ddeaff}
canvas{border:2px solid #77aadd}
</style>
</head>
<body>
<script>
let inputText = "";
let inputBoxX,inputBoxY,boxW,boxH;
let clearBtnX,saveBtnX,btnY,btnW,btnH;

function setup(){
  createCanvas(600,320);
  inputBoxX = 30;
  inputBoxY = 30;
  boxW = width - 60;
  boxH = height - 120;
  btnW = 130;
  btnH = 45;
  btnY = height - 70;
  clearBtnX = width/2 - btnW -20;
  saveBtnX = width/2 +20;
  textSize(18);
  textAlign(LEFT,TOP);
}

function draw(){
  background(240,248,255);
  //输入框
  fill(255);
  stroke(80,130,180);
  rect(inputBoxX,inputBoxY,boxW,boxH,6);
  noStroke();
  fill(20);
  text(inputText,inputBoxX+10,inputBoxY+8,boxW-20,boxH-10);

  //清空按钮
  fill(220,60,60);
  rect(clearBtnX,btnY,btnW,btnH,8);
  fill(255);
  textAlign(CENTER,CENTER);
  text("清空文字",clearBtnX+btnW/2,btnY+btnH/2);

  //保存提示按钮
  fill(60,140,220);
  rect(saveBtnX,btnY,btnW,btnH,8);
  fill(255);
  text("已保存",saveBtnX+btnW/2,btnY+btnH/2);

  //光标闪烁
  if(frameCount % 30 <15){
    fill(0);
    let textLen = textWidth(inputText.substring(0,inputText.length));
    rect(inputBoxX+10+textLen, inputBoxY+8,2,22);
  }
  textAlign(LEFT,TOP);
}

//键盘打字输入
function keyTyped(){
  if(keyCode === BACKSPACE){
    inputText = inputText.slice(0,-1);
  }else if(keyCode === ENTER){
    inputText += "\n";
  }else{
    inputText += key;
  }
}

//点击按钮
function mousePressed(){
  //清空按钮判定
  if(mouseX>clearBtnX && mouseX<clearBtnX+btnW && mouseY>btnY && mouseY<btnY+btnH){
    inputText = "";
  }
}
</script>
</body>
</html>

Game Source: TurboWord文字编辑器

Creator: CosmicBear11

Libraries: p5

Complexity: moderate (85 lines, 1.7 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: turboword-cosmicbear11" to link back to the original. Then publish at arcadelab.ai/publish.